<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
</head>
<style>
    .el-tree ::v-deep.el-tree-node > .el-tree-node__content{
        width: 264px;
        height: 40px;
    }
</style>
<body>
<div id="app">
    <template>
        <el-form :model="formData" ref="formData" :rules="rules" label-width="100px" style="margin-top: 5%">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="角色名称" prop="roleName">
                        <el-input size="small" v-model="formData.roleName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="备注" prop="remark">
                        <el-input size="small" v-model="formData.remark"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-tree style="margin-left: 5%;"  :data="menuData" show-checkbox node-key="id" ref="addTree" :props="defaultProps" prop="menuId"></el-tree>
        </el-form>
        <div style="text-align: center;margin-top: 5%">
            <el-button size="small" @click="closePage">取 消</el-button>
            <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
        </div>
    </template>
</div>
</body>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/request.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>
<script>
    new Vue({
        el: '#app',
        data() {
			return {
                menuData: [],
			    defaultProps: {
					children: 'children',
					label: 'menuName'
				},
                formData: {
                    roleName: '',
                    remark: '',
                    menuId: []
                },
                rules: {
                    roleName: [
                        {required: true, message: '请输入', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ]
                }
			}
        },
        created() {
            requests.post('/sys/menu/list', {})
            .then((res) => {
                if (res.code === '200') {
                    this.menuData = res.data;
                }
            });
        },
        methods: {
            handleSubmit() {
                this.formData.menuId = this.$refs.addTree.getCheckedKeys();
                addOrUpdate('/sys/role/add', this);
            }
        }
    });
</script>
</html>
